<template>
      <div class="top_search_input" :class="className" :style="{'width':input_width+'px'}">
        <input class="common_search_input" type="text" :placeholder="placeholder_val" v-model="search_val" @keyup.enter="search()"/>
        <img src="@/assets/images/tx_answer/accessRecord/sousuo.png" @click="search()" title="搜索" />
        <i title="清空" class="clear_input" style="right: 48px;" v-show="search_val" @click="search_val='',search()"></i>
        <i class="clear_input_icon" v-show="search_val"></i>
      </div>
</template>
<script>
    var _this
    export default {
    name: 'SearchInput',
    data() {
      return {
        search_val:'',
        placeholder_val: this.placeholder,
      }
    },
    props: {
        input_width:{

        },
        searchVal: {
          type: String,
        },
        placeholder:{//el-popover 的类
          type: String,//数据类型
        },
        className:{
          type: String,//数据类型
        }
    },
    created: function() { //html加载完成之前
      _this = this
    },
    mounted:function(){

    },
    methods: {
      // 搜索
      search() {
        this.$emit("search", this.search_val);
      },
    },
    watch: {
      searchVal() {
        this.search_val = this.searchVal;
      },
    },
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  .top_search_input {
    height: 30px;
    position: relative;
    box-sizing: border-box;
    position: relative
  }

  .top_search_input input {
    width: 100%;
    height: 100%;
    padding-right: 30px;
    padding-left: 12px;
    background-color: #fff;
    border: 1px solid #dddee1;
    border-radius: 2px;
    transition:0.2s;
    box-sizing: border-box;
  }

  .top_search_input input:focus{
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    border:1px solid rgba(68,148,255,0.6);
  }

  .top_search_input img {
    cursor: pointer;
    width: 17px;
    height: 17px;
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -11px;
    background-color: transparent;
    padding:3px;
  }
  .top_search_input img:hover{
     background-color:#f6f6f6;
     border-radius:3px;
  }
  i.clear_input {
    width: 16px;
    height: 16px;
    background: url("~@/assets/images/tx_answer/accessRecord/clear_input.png") center center / cover no-repeat;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: 8px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 9;
  }

  i.clear_input_icon {
    width: 1px;
    height: 16px;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    background-color: rgb(220, 220, 220);
    right: 36px;
  }
</style>
